<!-- 用户管理 -->
<template>
  <el-form ref="ruleFormRef" :model="tableForm" inline class="tableForm">
    <el-form-item label="用户名：">
      <el-input
        v-model="tableForm.queryRo.nickname"
        placeholder="请输入用户名"
        style="width: 180px"
        clearable
      />
    </el-form-item>
    <el-form-item label="手机号：">
      <el-input
        v-model="tableForm.queryRo.phone"
        placeholder="请输入手机号"
        style="width: 180px"
        clearable
      />
    </el-form-item>

    <el-form-item label="状态：" prop="name">
      <el-select v-model="tableForm.queryRo.status" clearable style="width: 136px">
        <el-option label="可用" :value="1" />
        <el-option label="禁用" :value="-1" />
      </el-select>
    </el-form-item>

    <el-form-item label="用户类型：" prop="type">
      <el-select v-model="tableForm.queryRo.type" clearable style="width: 136px">
        <el-option label="普通用户" :value="0" />
        <el-option label="平台" :value="1" />
        <el-option label="集团用户" :value="2" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column prop="nickname" label="用户名" align="center" />
    <el-table-column prop="id" label="UID" align="center" />
    <el-table-column prop="type" label="用户类型" align="center">
      <template #default="scope">
        {{ typeCn(scope.row.type) }}
      </template>
    </el-table-column>
    <el-table-column prop="status" label="用户状态" align="center">
      <template #default="scope">
        {{ scope.row.status == 1 ? '正常使用' : '禁用' }}
      </template>
    </el-table-column>

    <el-table-column prop="consume" label="累计消费" align="center" >
      <template #default="scope">
        {{ '-' }}
      </template>
    </el-table-column>

    <el-table-column prop="phone" label="联系电话" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button link type="success" @click="enableUser(scope.row)">启用</el-button>
        <el-button link type="danger" @click="disableUser(scope.row)">禁用</el-button>
        <el-button link type="primary" @click="openDialog(scope.row.id)">查看详细</el-button>
      </template>
    </el-table-column>
  </el-table>

  <footer class="pagination">
    <el-pagination
      v-model:currentPage="tableForm.current"
      v-model:page-size="tableForm.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      small
    />
  </footer>


  <UserDetailDialog v-if="showDialog" v-model:show="showDialog" @forbidden="forbidden" :detailId="detailId"></UserDetailDialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import UserDetailDialog from './components/UserDetailDialog.vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import { getUserinfoList,disableUserById,enableUserById } from '@/api/apis/userManageApi'
import api from "@/api/apis/powerSupplementApi";

const ruleForm = reactive({
  data:{
    id:"",
    status:"",
  },
})
const tableForm = reactive({
  queryRo: {
    nickname: '',
    phone: '',
    status: '',
    type:""
  },
  current: 1,
  pageSize: 20,
})
//总数
const total = ref(0)
//搜索
const search = () => {
  tableForm.current = 1
  getTableList()
}
const typeCn = (key:number) => {
  switch (key) {
    case 0:
      return '普通用户'
    case 1:
      return '平台'
    default:
      return '集团客户'
  }
}
//表格数据
const tableList = ref([])
//加载
const loading = ref(false)

onMounted(() => {
  getTableList()
})
//获取表格数据
const getTableList = async () => {
  loading.value = true
  let { data } = await getUserinfoList(tableForm)
  tableList.value = data.data.rows
  total.value = Number(data.data.total)
  loading.value = false
}
//改变每页条数
const handleSizeChange = (val: number) => {
  tableForm.current = 1
  tableForm.pageSize = val
  getTableList()
}
//改变当前页数
const handleCurrentChange = (val: number) => {
  tableForm.current = val
  getTableList()
}

//弹框开关
const showDialog = ref(false)
//详情id
const detailId = ref()
//打开详情弹框
const openDialog = (id: string) => {
  detailId.value = id
  showDialog.value = true
}

//启用
const enableUser = (row) => {
  ElMessageBox.confirm(
      '是否启用该用户?',
      '操作确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async() => {
        let res = await disableUserById({
          id:row.id,
          status:1
        })
        if(res.data.code == 200) {
          ElMessage({
            type: 'success',
            message: '启用成功',
          })
          getTableList()
        }
        if(res.data.code == 1032) {
          ElMessage({
            type: 'error',
            message: '已启用，请勿重复操作！',
          })
          getTableList()
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消启用',
        })
      })
}

//禁用
const disableUser = (row) => {
  ElMessageBox.confirm(
    '是否禁用该用户?',
    '操作确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      let res = await disableUserById({
        id:row.id,
        status:-1
      })
      if(res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: '禁用成功',
        })
        getTableList()
      }
      if(res.data.code == 1031) {
        ElMessage({
          type: 'error',
          message: '已禁用，请勿重复操作！',
        })
        getTableList()
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消禁用',
      })
    })
}
</script>

<style scoped lang="scss">
footer {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>
